// 导入 ReactDOM
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 条件，数据，状态
const isLoading = true;

// 定义 UI、界面、html标签
const loadingUI = <div>数据加载中11...</div>;
const successUI = <div>数据加载完毕!</div>;

// 函数里
const loadData = () => {
  if (isLoading) {
    return loadingUI;
  } else {
    return successUI;
  }
};

// 基于条件渲染的界面定义
const jsx1 = <>{loadData()}</>;

// 使用3元表达式
const jsx2 = <>{isLoading ? loadingUI : successUI}</>;

// 使用 && 运算符
const jsx3 = <>{isLoading && loadingUI}</>;

// 渲染这个标签（React 元素）
root.render(jsx3);
